<template>
    <view class="container">
        <sc-navbar title="发布订单" back></sc-navbar>
        <sc-flex direction="t" ai="center" jc="center" pt="300">
            <up-icon name="checkmark-circle-fill" size="100rpx" color="#007AFF"></up-icon>
            <sc-view height="30rpx"></sc-view>
            <sc-text text="跟台订单发布成功!" size="38" color="#3D3D3D"></sc-text>
            <sc-text text="请您随时关注跟台员接单情况" size="30" color="#666"></sc-text>
            <sc-text text="并积极回应。" size="30" color="#666"></sc-text>
        </sc-flex>
        <sc-footer height="150" col-gap="45">
            <sc-button type="grey-blue" text="查看详情" width="262" height="75"
                @click="$sc.push('/subOrder/pages/orderDetail')"></sc-button>
            <sc-button type="primary" text="创建新订单" width="262" height="75" @click="handleCreateNewOrder"></sc-button>
        </sc-footer>
    </view>
</template>

<script setup>
const handleCreateNewOrder = () => {
    uni.navigateTo({
        url: '/subOrder/pages/orderPlace'
    })
}
</script>

<style lang="scss" scoped>
.module-title {
    width: 750rpx;
    height: 75rpx;
    background: #FFFFFF;
    border-bottom: 1rpx solid #e6e6e6;
    padding: 30rpx 0 0 21rpx;
    font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
    font-weight: 400;
    font-size: 26rpx;
    color: #838383;
    line-height: 38rpx;
}

.item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32rpx 0 60rpx;
    width: 750rpx;
    height: 120rpx;

    .item-label {
        position: relative;
        width: 250rpx;
        font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
        font-weight: 400;
        font-size: 26rpx;
        color: #3D3D3D;
        line-height: 45rpx;

        &.required {
            &::before {
                position: absolute;
                left: -15rpx;
                content: '*';
                color: #FF0000;
            }
        }
    }
}

.recording-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 90rpx;
    height: 90rpx;
    background: #E7F1FF;
    border-radius: 8rpx;

    .recording-text {
        font-family: HarmonyOS Sans SC, HarmonyOS Sans SC;
        font-weight: 400;
        font-size: 15rpx;
        color: #3D3D3D;
        line-height: 35rpx;
    }


}

.recording-item {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .recording-left {
        padding: 0 35rpx;
        width: 495rpx;
        height: 45rpx;
        background: #E7F1FF;
        border-radius: 8rpx;
    }

    .recording-right {
        font-weight: 400;
        font-size: 23rpx;
        color: #FF5050;
        line-height: 45rpx;
    }
}

.remarks-wrap {
    padding: 20rpx 37rpx;

    .remarks-label {
        font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
        font-weight: 400;
        font-size: 26rpx;
        color: #3D3D3D;
        line-height: 45rpx;
    }

    .remarks-input {
        margin-top: 20rpx;
        padding: 22rpx 35rpx;
        width: 675rpx;
        height: 278rpx;
        background: rgba(22, 119, 255, 0.1);
        border-radius: 8rpx 8rpx 8rpx 8rpx;
        font-size: 23rpx;
    }
}
</style>